import React, {Component} from 'react';
import Header from "../Header";
import List from "../List";
import Footer from "../Footer";
class Todos extends Component {
    // 状态在哪里，操作状态的方法在哪里
    state={
        todos:[
            {id:'001',name:'吃饭',completed:true},
            {id:'002',name:'睡觉',completed:false},
            {id:'003',name:'打豆豆',completed:true}
        ]
    }
    // addTask 用于添加一个 task,接收的参数是 task 对象
    addTask = (task) => {
        // 添加任务
        const {todos} = this.state;
        const newTodos = [task,...todos];
        this.setState({todos:newTodos,inputValue:''}
        );
    }

    clear = () => {
        // 清除所有选中的任务
        const {todos} = this.state;
        const newTodos = todos.filter(todo => !todo.completed);
        this.setState({todos:newTodos});
    }

    updateTodo = (id,completed) => {
        // 更新任务状态
        const {todos} = this.state;
        const newTodos = todos.map(todo => {
            if(todo.id === id){
                todo.completed = completed;
            }
            return todo;
        });
        this.setState({todos:newTodos});
    }

    deleteTodo = (id) => {
        // 删除任务
        const {todos} = this.state;
        const newTodos = todos.filter(todo => todo.id !== id);
        this.setState({todos:newTodos});
    }

    checkAllTodo=(completed) => {
        console.log(completed)
        // 修改所有任务的状态
        const {todos} = this.state;
        const newTodos = todos.map(todo => {
            todo.completed = completed;
            return todo;
        });
        console.log(newTodos)
        this.setState({todos:newTodos});
    }

    render() {
        const {todos} = this.state;

        return (
            <div className="todo-wrap">
                <Header addTask={this.addTask} />
                <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                <Footer clear={this.clear}  todos={todos} checkAllTodo={this.checkAllTodo}/>
            </div>
        );
    }
}

export default Todos;